<template>
    <!--我的购物车-->
    <div class="contain">
        <div class="product-header">
            <div class="title">我的购物车</div>
        </div>
        <div class="main-box">
            <ul class="tb-box">
                <li class="tbl title">
                    <div class="item checkBox">
                        <input type="checkbox" name="total" value="total" v-model="totalSwitch"/>
                        全选
                    </div>
                    <div class="item product">
                        商品
                    </div>
                    <div class="item price">
                        单价
                    </div>
                    <div class="item number">
                        数量
                    </div>
                    <div class="item count">
                        小计
                    </div>
                    <div class="item option">
                        操作
                    </div>
                </li>
                <li class="tbl goods" v-for="(item,index) in list" :key="item.cid">
                    <div class="item checkBox">
                        <input type="checkbox" name="check" :value="index" v-model="checked[index]"/>
                    </div>
                    <div class="item product">
                        <img class="faceImg" :src="item.goods.fengmian_pic_url" alt="">
                        <span class="name">{{item.goods.name}}</span>
                    </div>
                    <div class="item price">
                        <span>{{item.goods.one_price | fixNumber}}</span>
                    </div>
                    <div class="item number">
                        {{item.num}}
                    </div>
                    <div class="item count">
                        <span>{{item.price| fixNumber}}</span>
                    </div>
                    <div class="item option">
                        <a class="del" @click="delMyCarProduct(item.carid)">删除</a>
                    </div>
                </li>
                <li class="nodata" v-if="list.length === 0">
                    <p>暂无数据</p>
                </li>
                <li class="footer"></li>
            </ul>
            <div class="count-box">
                <p>已选中{{num}}件商品 ，应付<span>￥{{price}}</span></p>
                <div class="button" @click="createOrder">立即结算</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'QuestionBank',
    components: {
        /**/
    },
    data() {
        return {
            list: [],
            totalSwitch: false,
            checked: null,
            num: 0,
            price: 0,
            checkList: [],

        };
    },
    computed: {

    },
    watch: {
        checked(val) {
            let totalNum = 0
            let totalPrice = 0
            val.forEach((item, index) => {
                if(item) {
                    let num = this.list[index].num || 1;
                    totalNum = num + totalNum;
                    totalPrice = this.list[index].price + totalPrice
                }
            })
            this.price = totalPrice.toFixed(2);
            this.num = totalNum
        },
        totalSwitch(val) {
            let temp = new Array(this.list.length);
            for(let i = 0;i<temp.length;i++){
                temp[i] = val;
            }
            this.checked = temp
        }
    },
    mounted() {
        if(this.$util.authLogin()) {
            this.ajaxShoppingList()
        }
    },
    methods: {
        // 查询信息
        ajaxShoppingList() {
            this.$api.ajaxData({
                pathName: 'doGetCarList',
                authorization: true,
                params: {
                    st_id: this.$api.getAccount().id || '1111',
                }
            })
                .then(res => {
                    let temp = []
                    res.obj.forEach(item => {
                        if(item.goods) {
                            let price = item.goods.one_price * item.num
                            temp.push(Object.assign(item,{
                                price: price
                            }))
                        }
                    })
                    this.list = temp
                    this.checked = new Array(this.list.length)
                })
                .catch(() => {
                });
        },
        // 删除
        delMyCarProduct(id) {
            this.$api.ajaxData({
                pathName: 'doGetCarDel',
                authorization: true,
                params: {
                    cid: id,
                }
            })
                .then(res => {
                    this.$util.alert(res.msg)
                    this.ajaxShoppingList()
                })
                .catch(() => {
                    this.ajaxShoppingList()
                });
        },
        // 下订单页面
        createOrder() {
            if(!this.checked || this.checked.length===0) {
                this.$util.alert('购物车内还未有商品')
                return;
            }
            let gList = []
            this.checked.forEach((item,index) =>{
                if(this.list[index].goods) {
                    gList.push(this.list[index].goods.id)
                }
            });
            if(gList.length === 0) {
                this.$util.alert('请选择要下单的商品')
                return;
            }
            this.$router.push({ name: 'ordering', query: {
                gid: gList.join(',')
            }});

        }
    }
};
</script>
<style scoped lang="scss">
    .contain {
        .product-header {
            padding: 40px 0;
            height: 110px;
            color: #fff;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100vw;
                height: 330px;
                background: url('../../assets/image/back/u542.jpg') no-repeat;
                background-size: 100% 100%;
            }
            .title {
                position: relative;
                padding: 0 30px;
                line-height: 30px;
                font-size: 28px;
            }

        }
        .main-box {
            position: relative;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 0 5px rgba(0,0,0,0.05);
            .tb-box {
                position: relative;
                margin-bottom: 20px;
                font-size: 14px;
                color: rgb(51,51,51);
                .tbl {
                    display: flex;
                    padding: 15px 0;
                    align-items: center;
                    .item {
                        padding-left: 25px;
                        flex: 2;

                    }
                    .checkBox {
                        flex: 1;
                    }
                    .product {
                        line-height: 20px;
                        flex: 6;
                        .faceImg {
                            float: left;
                            width: 130px;
                            height: 70px;
                            margin-right: 15px;
                            border-radius: 5px;
                            background: #f7f7f7;
                        }
                        .name {
                            text-align: left;
                            clear: both;
                        }
                    }
                    .option {
                        a {
                            margin-right: 10px;
                        }
                    }
                }
                .title {
                    height: 78px;
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    background: #f8f8f8;
                    font-size: 12px;
                    .product {
                        text-align: center;
                    }
                }
                .nodata {
                    padding: 45px;
                    text-align: center;
                    color: #999;
                }
                .footer {
                    height: 78px;
                    background: #f8f8f8;
                }
            }
            .count-box {
                display: flex;
                padding: 0 30px;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid #f7f7f7;
                height: 80px;
                font-size: 14px;
                color: #666;
                p {
                    span {
                        font-size: 20px;
                        font-weight: bold;
                        color: #FF6666;
                    }
                }
                .button {
                    height: 40px;
                    width: 126px;
                    line-height: 40px;
                    border-radius: 20px;
                    background: #FF6666;
                    text-align: center;
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
    }
</style>
